<template>
  <div class="log">
    <el-row type="flex" justify="space-between" align="middle" style="padding: 20px 0 10px">
      <el-col><h3 style="margin: 0">登录日志</h3></el-col>
      <el-col>
        <div class="flag" style="display: flex;justify-content: flex-end">
          <el-switch
              v-model="yhmShow"
              active-text="显示用户名">
          </el-switch>
        </div>
      </el-col>
    </el-row>
    <el-table
        v-loading="table_loading"
        fit
        :data="logs"
        style="width: 100%"
        highlight-current-row>
      <el-table-column
          prop="yhm"
          label="用户名"
          min-width="60px"
          v-if="yhmShow"
      >
      </el-table-column>

      <el-table-column
          prop="time"
          label="时间"
          min-width="80px"
      >
      </el-table-column>

      <el-table-column
          prop="ip"
          label="IP"
          min-width="90px"
      >
      </el-table-column>

    </el-table>
    <el-pagination
        class="hidden-xs-only"
        style="margin: 12px 0px;float: right"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[5,10,15,20,30,40,50]"
        :page-size="pages"
        layout="total, sizes, prev, pager, next, jumper"
        :total="all"
    >
    </el-pagination>
    <el-pagination
        class="hidden-sm-and-up m_page"
        style="margin: 12px 0px;float: right"
        background
        small
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-size="pages"
        layout="prev, pager, next"
        :total="all"
    >
    </el-pagination>
  </div>
</template>

<script>
import {getUserLog} from "../../utils/api";
import utils from "@/utils/time"

export default {
  name: "UserLog",
  data() {
    return {
      page: 1,
      pages: 10,
      all: 0,
      logs: [],
      table_loading: true,
      yhmShow:true
    }
  },
  methods: {
    handleSizeChange(size) {
      this.pages = size;
      // console.log(this.pagesize); //每页下拉显示数据
    },
    handleCurrentChange(currentPage) {
      this.page = currentPage;
      // console.log(this.currentPage); //点击第几页
    },
    getLogs(page,pages,user){
      if(!user || !page || !pages){
        this.table_loading = false
        return
      }
      this.table_loading = true
      getUserLog({user,page,pages}).then(res=>{
        this.all = res.all
        this.logs=res.body
        this.logs.forEach(v=>{
          v.time = utils.timestampToTime(v.time,5)
        })
        this.table_loading = false
      }).catch(err=>{
        console.log(err)
      })
    }
  },
  created() {
    this.getLogs(this.page,this.pages,this.$route.query?.user)
  },
  watch:{
    page(){
      this.getLogs(this.page,this.pages,this.$route.query?.user)
    },
    pages(){
      this.getLogs(this.page,this.pages,this.$route.query?.user)
    }
  }
}
</script>

<style scoped>
/deep/ .el-loading-mask{
  z-index: 1888;
}
</style>
